<template>
    <el-dropdown  @command="handleCommand">
        <el-icon 
            size="16"
            class="my-icon"
        >
            <el-badge 
                :show-zero="false"
                :value="formData.num"
            >
                <Bell />
            </el-badge>
        </el-icon>
        <template #dropdown>
            <el-dropdown-menu>
                <el-tabs v-model="activeName" class="tabs">
                    <el-tab-pane label="通知" name="first">
                        <el-dropdown-item 
                            v-for="(item, index) in formData.notice"
                            :key="'1-' + index"
                            divided
                            :command="item.command"
                        >
                            <div style="display: flex; align-items: center;">
                                <el-image 
                                    style="width: 3vw; height: 3vw; box-sizing: border-box; margin-right: 0.5vw; border-radius: 50%;" 
                                    :src="item.img" 
                                    fit="fill" 
                                />
                                <div>{{ item.name }}：点我</div>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item 
                            v-if="formData.notice.length > 0"
                            divided
                            command="清空"
                        >
                            <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
                                <el-icon 
                                    size="16"
                                >
                                    <CircleClose />
                                </el-icon>
                                <div>清空消息</div>
                            </div>
                        </el-dropdown-item>
                    </el-tab-pane>
                    <el-tab-pane 
                        label="邮件" 
                        name="second"
                    >
                        <el-dropdown-item 
                            v-for="(item, index) in formData.mail"
                            :key="'2-' + index"
                            divided
                            :command="item.command"
                        >
                            <div style="display: flex; align-items: center;">
                                <el-image 
                                    style="width: 3vw; height: 3vw; box-sizing: border-box; margin-right: 0.5vw; border-radius: 50%;" 
                                    :src="item.img" 
                                    fit="fill" 
                                />
                                <div>{{ item.name }}</div>
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item 
                            v-if="formData.mail.length > 0"
                            divided
                            command="清空"
                        >
                            <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
                                <el-icon 
                                    size="16"
                                >
                                    <CircleClose />
                                </el-icon>
                                <div>清空消息</div>
                            </div>
                        </el-dropdown-item>
                    </el-tab-pane>
                </el-tabs>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import {
        Bell,
        CircleClose,
    } from '@element-plus/icons-vue'
    // const props = withDefaults(defineProps<{
    //     modelValue?: boolean,
    // }>(), {
    //     modelValue: false,
    // })
    const { modelValue = false } = defineProps<{
        modelValue?: boolean,
    }>()
    const emits = defineEmits<{
        (e: 'update:modelValue', data: boolean): void,
    }>()
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
	const avatarImage = new URL('@/assets/img/avatar/avatar.png', import.meta.url).href

    const formData: Ref<any> = ref({
        num: 3,
        notice: [
            {
                command: 'https://www.baidu.com',
                img: avatarImage,
                name: '百度'
            },
            {
                command: 'https://www.zhihu.com',
                img: avatarImage,
                name: '知乎'
            },
            {
                command: 'https://www.douyin.com',
                img: avatarImage,
                name: '抖音'
            },
        ],
        mail: [
            {
                command: 'https://mail.qq.com',
                img: avatarImage,
                name: '1395063464@qq.com'
            },
        ]
    })

    const activeName = ref('first')
    const handleCommand = (command: any) => {
        console.log(command)
        if (command == '清空') {
            formData.value.num = 0
            formData.value.notice = []
            formData.value.mail = []

        } else {
            window.open(command, '_blank');
        }
    }

</script>

<style lang="scss" scoped>
    // .homeSearchDialog::after {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     z-index: -1;
    //     width: 100vw;
    //     height: 100vh;
    //     background-image: url('@/assets/avatar/bg8.png');
    //     background-size: 100% 100%;
    //     filter: blur(5px);
    // }
    // .homeSearchDialog {
    //     width: 100vw;
    //     height: 100vh;
    //     overflow: hidden;
    // }
    .el-menu-vertical {
        width: 300px;
        height: 100%;
    }
    .my-icon {
        @include my-home-head-icon;
    }
    .tabs {
        min-width: 300px;
        box-sizing: border-box;
        padding: 10px;
    }
</style>